<template>
  <div>
    <h2 align="center">管理员查看投资列表</h2>
    投资名称:<input type="text" v-model="financeList.F_Name">
    <input type="button" value="查询" @click="showInfo">&nbsp;
    <table class="table table-bordered">
      <tr>
        <td>投资ID</td>
        <td>投资项目名称</td>
        <td>总额度</td>
        <td>已投金额</td>
        <td>剩余额度</td>
        <td>投资次数</td>
        <td>操作</td>
      </tr>

      <tr v-for="item in list" :key="item.F_Id">
        <td>{{ item.F_Id }}</td>
        <td>{{ item.F_Name }}</td>
        <td>{{ item.F_TotalPrice }}CNY</td>
        <td>{{ item.F_Receive }}CNY</td>
        <td>{{ item.F_LastPrice }}CNY</td>
        <td>{{ item.F_Number }}</td>
        <td>
          <input type="button" value="删除" class="btn btn-danger" @click="DelInfo(item.F_Id)" >
        </td>
      </tr>
    </table>
  </div>

  <div>
    <span>共:{{ listcount }}条数据,每页:{{ financeList.pagesize }}条数据,当前第:{{ financeList.pageindex }}/{{ pagecount }}页</span>&nbsp;
    <input type="button" value="首页" @click="GoPage('home')" class="btn btn-primary">&nbsp;
    <input type="button" value="上一页" @click="GoPage('prev')" class="btn btn-primary">&nbsp;
    <input type="button" value="下一页" @click="GoPage('next')" class="btn btn-primary">&nbsp;
    <input type="button" value="尾页" @click="GoPage('end')" class="btn btn-primary">&nbsp;&nbsp;&nbsp;
    <input type="text" v-model="financeList.pageindex" size="3">&nbsp;
    <input type="button" value="Go" @click="GoPage('GoIndex')" class="btn btn-primary">&nbsp;&nbsp;
    <select v-model="financeList.pagesize" @change="GoPage('GoSize')">
      <option value="3">每页3条</option>
      <option value="5">每页5条</option>
      <option value="7">每页7条</option>
    </select>
  </div>
</template>

<script setup lang="ts">

import {reactive,toRefs,onMounted} from 'vue'

import axios from 'axios';

import {useRoute,useRouter} from 'vue-router'

let route = useRoute()
let router = useRouter()

//数据
let data:any = reactive({
  //登录数据
  list:[],
   //查询条件
   financeList:{
    F_Name:'',
    pageindex:1,
    pagesize:3
  },
  listcount:'',
  pagecount:'',
  arr:[],
})

//解构
let {list,financeList,listcount,pagecount,arr} = toRefs(data)

//生命周期函数
onMounted(()=>{
  showInfo()
})

//显示数据
const showInfo =()=>{
  axios({
    url:'/api/Finance/ShowFinanceList',
    method:'get',
    params:financeList.value
  }).then(res=>{
    console.log(res);
    list.value=res.data.data.data
    listcount=res.data.data.listcount,
    pagecount=res.data.data.pagecount
  }).catch(err=>{
    console.log(err);
  })
}

//上下页 首尾页
const GoPage =(str:any)=>{
  if(str=='home'){
    if(financeList.value.pageindex==1){
      return alert('已经是第一页了')
    }
    financeList.value.pageindex=1
  }else if(str=='prev'){
    if(financeList.value.pageindex<=1){
      return alert('已经是第一页了')
    }
    financeList.value.pageindex--
  }else if(str=='next'){
    if(financeList.value.pageindex>=pagecount){
      return alert('已经是最后一页了')
    }
    financeList.value.pageindex++
  }else if(str=='end'){
    if(financeList.value.pageindex==pagecount){
      return alert('已经是最后一页了')
    }
    financeList.value.pageindex=pagecount
  }else{
    if(financeList.value.pageindex==''){
      return alert('输入的页码不能为空')
    }
    if(financeList.value.pageindex<1 ||financeList.value.pageindex>pagecount){
      return alert('输入的页码应在0-'+pagecount+'之间')
    }
    if(isNaN(financeList.value.pageindex)){
      return alert('输入的页码必须为数字')
    }
  }
  showInfo();
  financeList.value.pageindex=financeList.value.pageindex
}

//删除方法
const DelInfo =(F_Id:any)=>{
  if(confirm("确认删除吗")){
    axios({
      url:'/api/Finance/DelFinance',
      method:'get',
      params:{
        F_Id:F_Id
      }
    }).then(res=>{
      console.log(res);
      if(res.data.data>0){
        alert('删除成功')
        showInfo()
      }else{
        return alert('删除失败')
      }
    }).catch(err=>{
      console.log(err); 
    })
  }
}

</script>

<style scoped>

</style>